<%@ page language="java" contentType="text/html; charset=utf-8"   pageEncoding="utf-8"%>
<!DOCTYPE html>
<style type="text/css">
    .tagBall{width:800px;height:800px;margin:50px auto;position:relative;}
    .tag{display:block;position:absolute;left:0px;top:0px;color:#000;text-decoration:none;font-size:15px;font-weight:bold;}
    .tag:hover{border:1px solid #666;}
</style>
<script type="text/javascript" src="${ctxPath }/js/lib/jquery-1.12.4.min.js?20190117152252"></script>
<%-- <div id="cloud">
</div>
<link href="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
<script type="text/javascript">
var array = [
    {text: "标签1", weight: 13},
    {text: "标签2", weight: 10.5},
    {text: "日常", weight: 9.4}
];
$("#cloud").jQCloud(array, {height: 200});
</script> --%>

<div class="tagBall">
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
</div>
<script type="text/javascript" src="${ctxPath }/js/lib/cloudTag.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.tagBall').cloudTag({ballSize:200});
        });
    </script>
